<template>
  <MyCard title="未来30天游客量趋势图" class="myCard">
    <div class="charts" ref="charts"></div>
  </MyCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const charts = ref();

onMounted(() => {
  const myCharts = echarts.init(charts.value);
  const option = {
    xAxis: {
      type: 'category',
      // 两侧不留白
      boundaryGap: false,
      // 坐标轴轴线相关设置
      axisLine: {
        show: false,
        lineStyle: {
          color: '#1E6F9F',
        },
      },
      // 坐标轴刻度相关设置
      axisTick: {
        show: false,
      },
      // 分割线
      splitLine: {
        show: false, // 不要分割线
      },
    },
    yAxis: {
      name: '(访问量)',
      type: 'value',
      // 两侧不留白
      boundaryGap: false,
      // 坐标轴轴线相关设置
      axisLine: {
        show: true,
        lineStyle: {
          color: '#1E6F9F',
        },
      },
      // 分割线
      splitLine: {
        show: false, // 不要分割线
      },
      // name样式
      nameTextStyle: {
        // color: 'aqua', // 不设置默认使用axisLine.lineStyle.color
        align: 'right', // 文字对齐方式
      },
    },
    tooltip: {
      trigger: 'axis',
      position: function (pt: any) {
        return [pt[0], '10%'];
      },
    },
    series: [
      {
        //折线图
        type: 'line',
        //平滑曲线
        smooth: 0.6,
        // 标记类型
        symbol: 'none',
        // 线样式
        lineStyle: {
          color: '#F5915B',
          width: 2,
        },
        //区域填充颜色
        areaStyle: {
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#F5915B',
            },
            {
              offset: 1,
              color: '#11144E',
            },
          ]),
        },
        data: [
          ['10-10', 222],
          ['10-11', 888],
          ['10-12', 333],
          ['10-13', 999],
          ['10-14', 111],
          ['10-15', 777],
          ['10-16', 222],
          ['10-17', 888],
          ['10-18', 999],
          ['10-19', 111],
          ['10-20', 777],
          ['10-21', 333],
          ['10-22', 777],
          ['10-23', 888],
          ['10-24', 222],
          ['10-25', 333],
          ['10-26', 888],
          ['10-27', 888],
        ],
      },
    ],
    // 图表整体位置设置
    grid: {
      left: 50,
      top: 50,
      right: 20,
      bottom: 30,
    },
  };
  myCharts.setOption(option);
});
</script>

<style lang="scss" scoped>
.myCard {
  background: url('../../images/dataScreen-main-cb.png') no-repeat;
  background-size: cover;

  .charts {
    flex: auto;
  }
}
</style>
